<template>
	<view class="recharge">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">提现</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="unit">USDT</view>
			<view class="list">
				<view class="item">
					<view class="key">转出地址</view>
					<view class="cell">
						<input type="text" placeholder="输入或长按粘贴地址" class="input" v-model="form.address">
						<!-- <view class="suffix">
							<image src="@/static/images/16.png"></image>
						</view> -->
					</view>
				</view>
				<view class="item">
					<view class="key">数量</view>
					<view class="cell">
						<input type="text" :placeholder="`最小转出数量${min_val}`" class="input" v-model="form.money"
							@input="change">
						<view class="suffix">
							<view class="unit">USDT</view>
							<view class="all" @click="all_in">全部</view>
						</view>
					</view>
					<view class="balance">可用{{balance_val}} USDT</view>
				</view>
				<view class="item">
					<view class="key">手续费</view>
					<view class="cell">
						<view class="input">{{data_info.procedures}}</view>
						<view class="suffix">
							<view class="unit">USDT</view>
						</view>
					</view>
				</view>
			</view>
			<view class="desc">
				<uv-parse :content="content" />
			</view>
			<view class="account">
				<view class="key">到账数量</view>
				<view class="value">{{data_info.real_val}} USDT</view>
			</view>
			<view class="submit" @click="submit">转出</view>
		</view>
	</view>
</template>

<script setup>
	import {
		withdrawalGet,
		withdrawalPost
	} from "@/request/api";
	import {
		ref,
		nextTick,
		reactive,
		shallowRef
	} from "vue";

	const form = reactive({
		address: "",
		money: ""
	});

	const balance_val = ref(0);
	const min_val = ref(0);
	const content = ref("");
	let procedures = 0;
	const getList = async () => {
		let {
			balance,
			setting
		} = await withdrawalGet();
		balance_val.value = balance;
		min_val.value = setting?.min;
		procedures = setting?.commission;
		content.value = setting?.content;
	};
	getList();

	const data_info = reactive({
		real_val: 0,
		procedures: 0
	});
	const diff_fn = () => {
		let a = (Number(form.money) * Number(procedures) / 100).toFixed(4);
		data_info.procedures = a;

		let b = (Number(form.money) - Number(data_info.procedures)).toFixed(4);
		data_info.real_val = b;
	};
	const change = (e) => {
		let price = e.detail.value.replace(/[^\d.]/g, '').replace(/(\d)(\.)(\d*)(\2*)(\d*)/, '$1$2$3$5').replace(
			/^(\-)*(\d+)\.(\d{1,4}).*$/, '$1$2.$3');
		nextTick(() => {
			form.money = price;
		});
		diff_fn();
	};
	const all_in = () => {
		form.money = balance_val.value;
		diff_fn();
	};
	const submit = async () => {
		await withdrawalPost(form);
		uni.$uv.toast("操作成功");
		setTimeout(() => getList(), 1000);
	};
</script>

<style scoped lang="scss">
	.recharge {
		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.content {
			padding: 30rpx;
			box-sizing: border-box;

			.unit {
				color: #CCCCCC;
				font-size: 40rpx;
				font-weight: bold;
				padding-bottom: 55rpx;
				box-sizing: border-box;
			}

			.list {
				border-radius: 20rpx;
				padding: 40rpx 30rpx 55rpx;
				box-sizing: border-box;
				background: #2F2F2F;

				.item {
					padding-top: 60rpx;

					&:first-child {
						padding-top: 0;
					}

					.key {
						color: #999999;
						font-size: 22rpx;
						font-weight: 400;
					}

					.cell {
						border-bottom: 1px solid #444444;
						padding-top: 40rpx;
						padding-bottom: 20rpx;
						box-sizing: border-box;
						display: flex;

						.input {
							flex: 1;
							color: #FFFFFF;
							font-size: 30rpx;
							font-weight: 400;
						}

						.suffix {
							display: flex;
							align-items: center;

							image {
								width: 28rpx;
								height: 28rpx;
							}

							.unit {
								color: #666666;
								font-size: 26rpx;
								font-weight: bold;
								padding: 0 12rpx;
								box-sizing: border-box;
							}

							.all {
								color: #999999;
								font-size: 26rpx;
								font-weight: 400;
								border-left: 1px solid #EEEEEE;
								padding: 0 12rpx;
								box-sizing: border-box;
							}
						}
					}

					.balance {
						color: #999999;
						font-size: 22rpx;
						font-weight: 400;
						padding-top: 15rpx;
						box-sizing: border-box;
					}
				}
			}

			.desc {
				border-radius: 20rpx;
				margin-top: 20rpx;
				margin-bottom: 90rpx;
				padding: 30rpx;
				background: #2F2F2F;

				view {
					line-height: 32rpx;
					color: #999999;
					font-size: 22rpx;
					font-weight: 400;
				}
			}

			.account {
				padding: 0 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.key {
					color: #999999;
					font-size: 30rpx;
					font-weight: 400;
				}

				.value {
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.submit {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #333333;
				font-size: 34rpx;
				font-weight: bold;
				border-radius: 16rpx;
				margin-top: 30rpx;
				background: #DDF247;
			}
		}
	}
</style>